<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head lang="en">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Galio</title>
    <!-- Framework CSS -->
    <link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>

    <script type="text/javascript" src="assets/scripts/jquery.js"></script>
    <script type="text/javascript" src="assets/scripts/jquery-ui.custom.min.js"></script>

    <script type="text/javascript" src="assets/scripts/shCore.js"></script>
    <script type="text/javascript" src="assets/scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="assets/scripts/shBrushCss.js"></script>
    <script type="text/javascript" src="assets/scripts/shBrushPhp.js"></script>
    <script type="text/javascript" src="assets/scripts/shBrushXml.js"></script>
    <link type="text/css" rel="stylesheet" href="assets/blueprint-css/shCoreDefault.css" />

    <!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
    <link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
    <script type="text/javascript">
        SyntaxHighlighter.all();
    </script>
    <script type="text/javascript">
        (function ($) {
            $(document).ready(function () {
                // Cache selectors
                var lastId,
                    topMenu = $(".menu .alpha"),
                    topMenuHeight = topMenu.outerHeight() + 15,
                    // All list items
                    menuItems = topMenu.find("a"),
                    canUpdateURL = typeof history.pushState === "function" ? true : false,
                    // Anchors corresponding to menu items
                    scrollItems = menuItems.map(function () {
                        var item = $($(this).attr("href"));
                        if (item.length) {
                            return item;
                        }
                    });

                // Bind click handler to menu items
                // so we can get a fancy scroll animation
                menuItems.click(function (e) {
                    var href = $(this).attr("href"),
                        offsetTop = $(href).offset().top - topMenuHeight + 1;

                    $('html, body').stop().animate({
                        scrollTop: offsetTop
                    }, 300);
                    e.preventDefault();
                });

                // Bind to scroll
                $(window).scroll(function () {
                    // Get container scroll position
                    var fromTop = $(this).scrollTop() + topMenuHeight;

                    // Get id of current scroll item
                    var cur = scrollItems.map(function () {
                        if ($(this).offset().top < fromTop)
                            return this;
                    });
                    // Get the id of the current element
                    cur = cur[cur.length - 1];
                    var id = cur && cur.length ? cur[0].id : "";

                    if (lastId !== id) {
                        lastId = id;
                        // Set/remove active class
                        menuItems
                            .parents('li').removeClass("active").end()
                            .filter("[href=#" + id + "]").parent('li').addClass("active")
                            .parents('li').addClass('active');

                        if (canUpdateURL) {
                            history.pushState(null, null, window.location.href.split('#').shift() + '#' + id);
                        } else {
                            var $section = $('#' + id);

                            $section.attr('id', '');
                            window.location.hash = '#' + id;
                            $section.attr('id', id);
                        }
                    }
                });

                hashname = window.location.hash.replace('#', '');

                $('.menu li').removeClass('active');
                $('.menu li a[href=#' + hashname + ']')
                    .parent('li').addClass('active')
                    .parents('li').addClass('active');

                elem = $('#' + hashname);

                if (hashname.length > 1) {
                    $('body, html').animate({
                        scrollTop: $(elem).offset().top - topMenuHeight - 315
                    }, 500, 'easeInOutCubic');
                };
            })
        })(jQuery);
    </script>
</head>


<body>
    <div class="docs-header-bg">
        <div class="docs-header">
            <h1 class="center">Galio - Bootstrap Responsive Template Documentation</h1>
            <p>A Complete Guide of Galio - Bootstrap Responsive Template - Document Version 1.1</p>
            <div>
                <a href="#" target="_blank" class="header-button">Support</a>
                <a href="http://themeforest.net/user/htmlcooker/portfolio" target="_blank" class="header-button">Item Page</a>
                <a href="http://www.htmlcooker.com/plaza/galio/" target="_blank" class="header-button">Live Demo</a>
            </div>
        </div>
    </div>
    <div class="container">
        <!--      Section       -->
        <!-- 		<h2 id="toc" class="alt">Table of Contents</h2> -->
        <div class="menu">
            <ol class="alpha">
                <li><a href="#information">General Info</a>
                    <ol>
                        <li><a href="#folder-struc">Folder Structure</a>
                        </li>
                    </ol>
                </li>
                <li><a href="#how-to">How To?</a>
                    <ol>
                        <li><a href="#main-slider">Main Slider</a></li>
                        <li><a href="#featured">Featured / Owl Carousel</a></li>
                        <li><a href="#gmap">Google Map</a></li>
                    </ol>
                </li>
                <li><a href="#html">Code</a>
                    <ol>
                        <li><a href="#html">HTML</a>
                        </li>
                        <li><a href="#css">CSS</a>
                        </li>
                        <li><a href="#java">JavaScript</a>
                        </li>
                    </ol>
                </li>

                <li><a href="#elements">Elements</a>
                    <ol>
                        <li><a href="#font-awesome">Font Awesome Icon</a></li>
                        <li><a href="#nivo-slider">Main Slider / Nivo Slider</a></li>
                        <li><a href="#owl-carousel">Owl Carousel</a></li>
                        <li><a href="#bxslider">BxSlider &amp; Cloud Zoom</a></li>
                    </ol>
                </li>

                <li><a href="#credits">Credits</a>
                </li>
            </ol>
        </div>

        <h3 id="information"><strong>General Informations</strong> - <a href="#information">top</a></h3>

        <p>First of all, we want to say <strong>thanks you!</strong> We are very grateful that you have chosen our mega menu for your website. We will do everything we can to provide you the best support possible. Feel free asking us if you need more help.</p>

        <p>This document covers the Galio - Bootstrap Responsive Template structure, set up, and use of this template and provides answers and solutions to common problems and issues - we encourage you to read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to ask support. (<a href="#" target="_blank">Support</a>)</p>


        <hr>

        <div class="subitems">

            <h5 id="folder-struc"><strong>Folder Structure</strong> - <a href="#information">top</a></h5>
            <ul class="folder-struc">
                <li class="file folder">galio</li>
            </ul>

            <ul class="folder-struc margin-left">
                <li class="file folder">css</li>
                <li class="file folder">fonts</li>
                <li class="file folder">images</li>
                <li class="file folder">js</li>
                <li class="file page">404.html</li>
                <li class="file page">blog.html</li>
                <li class="file page">blog-detail.html</li>
                <li class="file page">cart.html</li>
                <li class="file page">checkout.html</li>
                <li class="file page">contact.html</li>
                <li class="file page">detail.html</li>
                <li class="file page">grid.html</li>
                <li class="file page">index.html</li>
                <li class="file page">index-accessories.html</li>
                <li class="file page">index-boxed.html</li>
                <li class="file page">list.html</li>
                <li class="file page">wishlist.html</li>
            </ul>

            <hr>

            <!--      Section       -->

            <h3 id="how-to"><strong>How To?</strong> - <a href="#information">top</a></h3>
			
			<h6 id="main-slider">How to Customize Main Slider?</h6>
            <ul class="folder-struc">
                <li class="file page">index.html</li>
            </ul>
            <pre class="code-box">

/* =========================================
===  Main Slider  ====
============================================ */
    $('#ma-inivoslider-banner7').nivoSlider({
        effect: 'random',
        slices: 15,
        boxCols: 8,
        boxRows: 4,
        animSpeed: 1000,
        pauseTime: 6000,
        startSlide: 0,
        controlNav: false,
        controlNavThumbs: false,
        pauseOnHover: true,
        manualAdvance: false,
        prevText: 'Prev',
        nextText: 'Next',
        afterLoad: function(){
            },     
        beforeChange: function(){ 
        }, 
        afterChange: function(){ 
        }
    });

			</pre>

			<hr />


            <h6 id="featured">How to Customize Featured Slider?</h6>
            <ul class="folder-struc">
                <li class="file page">custom.js</li>
            </ul>
            <pre class="code-box">

/* ========================================
===  Owl Carousel/ Slider/ New Arrival  ===
======================================== */
    $("#featured-products .owl").owlCarousel({
        autoPlay : false,
        items : 4,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [991,2],
        itemsTablet: [767,2],
        itemsMobile : [480,1],
        slideSpeed : 3000,
        paginationSpeed : 3000,
        rewindSpeed : 3000,
        navigation : true,
        stopOnHover : true,
        pagination : false,
        scrollPerPage:true,
    });

</pre>

		
<hr>


			<h6 id="gmap">How to change google map address?</h6>
            <p>In contact.html there you can edit google map address.</p>
            <ul class="folder-struc">
                <li class="file page">contact.html</li>
            </ul>
            <br>
            
            <pre class="code-box">
/* ==============================================
    Google Maps
=============================================== */
    $(document).ready(function(){
	createMarker(latitude,longitude);
    });
</pre>

<hr>

            <h3 id="html"><strong>HTML Structure</strong> - <a href="#information">top</a></h3>

            <div class="narrow-p">

                <p>The template is build on <a href="http://getbootstrap.com" target="_blank">Bootstrap 3.3.4</a> the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web..</p>

                <p>Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.</p>

                <p>Create a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding, then create .row and add columns with appropriate device name (xs, sm, md, lg) and grid number (2, 4, 6, 12).</p>

                <p>For full documentation, please visit Bootstrap 3 site: <a href="http://getbootstrap.com/css" target="_blank">http://getbootstrap.com/css/</a>
                </p>
                <ul class="folder-struc">
                    <li class="file page">css/bootstrap.css</li>
                </ul>

                <pre class="code-box">
&lt;!-- Bootstrap --&gt;
&lt;link href=&quot;css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;

&lt;/head&gt;

&lt;div class=&quot;container&quot;&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-lg-6&quot;&gt;
			...
		&lt;/div&gt;
		
		&lt;div class=&quot;col-lg-6&quot;&gt;
			...
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
</pre>

            </div>

            <hr>
            <!-- HTML -->

            <!-- CSS -->
            <h3 id="css"><strong>CSS Structure</strong> - <a href="#information">top</a></h3>

            <div class="narrow-p">

                <p>CSS folder and files struture Well organized.
                    <br>These are the CSS file you're be using in the template:</p>

                <ul class="folder-struc">
                    <li class="file folder">css</li>
                </ul>

                <pre class="code-box">
bootstrap.css (Bootstrap Original file of 3.2.0 Don't touch this file)
style.css (All custom elements in this file)
	</pre>

            </div>

            <hr>
            <!-- CSS -->


            <!-- Java Script -->
            <h3 id="java"><strong>Java Script</strong> - <a href="#information">top</a></h3>

            <div class="narrow-p">

                <p>jQuery - is a Javascript library that greatly reduces the amount of code that you must write. For more information, please visit http://www.jquery.com/</p>

                <p>The initialization of the elements, libs and features is made by the file scripts.js, in the js folder. Take a look at the "build" function to see what it does.</p>

                <ul class="folder-struc">
                    <li class="file page">js/scripts.js</li>
                </ul>

                <pre class="code-box">
&lt;!-- Custom Functions --&gt;
&lt;script src=&quot;js/custom.js&quot; typr=&quot;text/javascript&quot;&gt;&lt;/script&gt;
	</pre>

            </div>

            <hr>
            <!-- Java Script -->







            <hr>
            <!-- Elements -->



            <!-- Icons -->
            <h3 id="font-awesome"><strong>Font Awesome Icon</strong> - <a href="#information">top</a></h3>

            <div class="narrow-p">

                <p>In Galio - Bootstrap Responsive Template we used FontAwesome icons. Which is more user friendly and 350+ icons avaiable.</p>

                <span class="notice-box">You can find all icon classes here : <a href="http://fortawesome.github.io/Font-Awesome/cheatsheet/" target="_blank">FontAwesome</a>.</span>

                <p>Use of icons :</p>
                <pre class="code-box">
&lt;i class=&quot;fa fa-star&quot;&gt;&lt;i&gt;
</pre>

            </div>


			<hr>
			<!-- Icons -->


			<!-- Slider -->
            <h3 id="nivo-slider"><strong>Nivo Slider</strong> - <a href="#information">top</a></h3>

            <div class="narrow-p">

                <p>In Galio Bootstrap Responsive Template we used <a href="http://nivo.dev7studios.com" target="_blank">Nivo Slider</a> for main slider. Which is more user friendly and supports all major browsers.</p>

                <p>Main Slider :</p>
                <pre class="code-box">
&lt;div class="flexslider ma-nivoslider"&gt;
	&lt;div class="ma-loading"&gt;&lt;/div&gt;
	&lt;div id="ma-inivoslider-banner7" class="slides"&gt;
		&lt;img src="images/slider/slide-01.jpg" class="dn" alt="" title="#banner7-caption1"  /&gt;                           
		&lt;img src="images/slider/slide-02.jpg" class="dn" alt="" title="#banner7-caption2"  /&gt;
	&lt;/div&gt;
	&lt;div id="banner7-caption1" class="banner7-caption nivo-html-caption nivo-caption"&gt;
		&lt;div class="timethai"&gt;&lt;/div&gt;
		&lt;div class="banner7-content slider-1"&gt;
			&lt;div class="title-container"&gt;
				&lt;h1 class="title1"&gt;headphones az12&lt;/h1&gt;
				&lt;h2 class="title2" &gt;Typi non habent claritatem insitam; est usus legentis&lt;/h2&gt;											
			&lt;/div&gt;
			&lt;div class="banner7-des"&gt;
				&lt;div class="des"&gt;
					&lt;h1&gt;sale up to!&lt;/h1&gt;
					&lt;h2&gt;30% off&lt;/h2&gt;
					&lt;div class="check-box"&gt;
						&lt;ul class="list-unstyled"&gt;
							&lt;li&gt;With all products in shop&lt;/li&gt;
							&lt;li&gt;All combos $69.96&lt;/li&gt;
						&lt;/ul&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;																								
			&lt;img class="img1" src="images/slider/img-04.png" alt="" /&gt;																				
		&lt;/div&gt;
	&lt;/div&gt;						
	&lt;div id="banner7-caption2" class="banner7-caption nivo-html-caption nivo-caption"&gt;
		&lt;div class="timethai"&gt;&lt;/div&gt;
		&lt;div class="banner7-content slider-2"&gt;
			&lt;div class="title-container"&gt;
				&lt;h1 class="title1"&gt;Samsung s5&lt;/h1&gt;
				&lt;h2 class="title2" &gt;Typi non habent claritatem insitam; est usus legentis&lt;/h2&gt;											
			&lt;/div&gt;
			&lt;div class="banner7-des"&gt;
				&lt;div class="des"&gt;
					&lt;h1&gt;sale up to!&lt;/h1&gt;
					&lt;h2&gt;50% off&lt;/h2&gt;
				&lt;/div&gt;
			&lt;/div&gt;																								
			&lt;img class="img1" src="images/slider/img-05.png" alt="" /&gt;																					
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;&lt;!-- /.flexslider --&gt;
                </pre>
            </div>
            <p>Nivo Slider Activation</p>
            <pre class="code-box">
    $(window).load(function() {
        $(document).off('mouseenter').on('mouseenter', '.pos-slideshow', function(e){
            $('.ma-banner7-container .timethai').addClass('pos_hover');
        });
        $(document).off('mouseleave').on('mouseleave', '.pos-slideshow', function(e){
            $('.ma-banner7-container .timethai').removeClass('pos_hover');
        });
    });
    $(window).load(function() {
        $('#ma-inivoslider-banner7').nivoSlider({
            effect: 'random',
            slices: 15,
            boxCols: 8,
            boxRows: 4,
            animSpeed: 1000,
            pauseTime: 6000,
            startSlide: 0,
            controlNav: false,
            controlNavThumbs: false,
            pauseOnHover: true,
            manualAdvance: false,
            prevText: 'Prev',
            nextText: 'Next',
            afterLoad: function(){
                },     
            beforeChange: function(){ 
            }, 
            afterChange: function(){ 
            }
        });
    });
			</pre>

            <!-- Slider -->
            <h3 id="owl-carousel"><strong>Owl Carousel</strong> - <a href="#information">top</a></h3>

            <div class="narrow-p">

                <p>In Galio Bootstrap Responsive Template we used <a href="http://owlgraphic.com/owlcarousel/" target="_blank">OwlCarousel</a> for all slider. Which is more user friendly and supports all major browsers.</p>

                <p>Featured Slider :</p>
                <pre class="code-box">


    &lt;div id="featured-products" class="owl-container"&gt;
        &lt;div class="owl"&gt;
            &lt;div class='productslider-item item'&gt;
                &lt;div class="item-inner"&gt;
                    &lt;div class="images-container"&gt;
                        &lt;div class="product_icon"&gt;
                            &lt;div class='new-icon'>&lt;span>new&lt;/span&gt;&lt;/div&gt;
                        &lt;/div>
                        &lt;a href="#" title="Nunc facilisis" class="product-image"&gt;
                            &lt;img src="images/products/8.jpg" alt="Nunc facilisis" /&gt;
                        &lt;/a>
                        &lt;div class="box-hover"&gt;
                            &lt;ul class="add-to-links"&gt;
                                &lt;li&gt;&lt;a href="#" class="link-quickview"&gt;Quick View&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#" class="link-wishlist"&gt;Add to Wishlist&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#" class="link-compare"&gt;Add to Compare&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#" class="link-cart"&gt;Add to Cart&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="des-container"&gt;
                        &lt;h2 class="product-name"&gt;&lt;a href="#" title="Nunc facilisis"&gt;Nunc facilisis&lt;/a&gt;&lt;/h2&gt;
                        &lt;div class="price-box"&gt;
                            &lt;p class="special-price"&gt;
                                &lt;span class="price-label"&gt;Special Price&lt;/span&gt;
                                &lt;span class="price"&gt;$169.99&lt;/span&gt;
                            &lt;/p&gt;
                            &lt;p class="old-price"&gt;
                                &lt;span class="price-label"&gt;Regular Price: &lt;/span&gt;
                                &lt;span class="price"&gt;$189.00&lt;/span&gt;
                            &lt;/p&gt;
                        &lt;/div&gt;
                        &lt;div class="ratings"&gt;
                            &lt;div class="rating-box"&gt;
                                &lt;div class="rating" style="width:67%"&gt;&lt;/div&gt;
                            &lt;/div&gt;
                            &lt;span class="amount"&gt;&lt;a href="#"&gt;3 Review(s)&lt;/a&gt;&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
</pre>


<p>Owl Carousel Activation</p>
                <pre class="code-box">

/* ========================================
===  Owl Carousel/ Slider/ New Arrival  ===
======================================== */
    $("#featured-products .owl").owlCarousel({
        autoPlay : false,
        items : 4,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [991,2],
        itemsTablet: [767,2],
        itemsMobile : [480,1],
        slideSpeed : 3000,
        paginationSpeed : 3000,
        rewindSpeed : 3000,
        navigation : true,
        stopOnHover : true,
        pagination : false,
        scrollPerPage:true,
    });

</pre>



            </div>
            
            <hr>
            
            <!-- BxSlider -->
            <h3 id="bxslider"><strong>BxSlider &amp; Cloud Zoom</strong> - <a href="#information">top</a></h3>

            <div class="narrow-p">

                <p>In Galio Bootstrap Responsive Template we used <a href="http://bxslider.com" target="_blank">BxSlider</a> and <a href="https://github.com/smurfy/cloud-zoom">Cloud Zoom</a> for product detail.</p>

                <p>BxSlider &amp; Cloud Zoom :</p>
                <pre class="code-box">
&lt;div class="product-img-box"&gt;
	&lt;p class="product-image"&gt;
		&lt;a href="images/products/1.jpg" class="cloud-zoom" id="ma-zoom1"&gt;
			&lt;img src="images/products/1.jpg" alt="Fusce aliquam" title="Fusce aliquam" /&gt;
		&lt;/a&gt;
	&lt;/p&gt;
	&lt;div class="more-views thumbnail-container"&gt;
		&lt;ul class="bxslider"&gt;
			&lt;li class="thumbnail-item"&gt;
				&lt;a href="images/products/1.jpg" class="cloud-zoom-gallery" title="" name="images/products/1.jpg" rel="useZoom: 'ma-zoom1', smallImage: 'images/products/1.jpg'"&gt;
					&lt;img src="images/products/1.jpg" alt="" /&gt;
				&lt;/a&gt;
			&lt;/li&gt;
			&lt;li class="thumbnail-item"&gt;
				&lt;a href="images/products/2.jpg" class="cloud-zoom-gallery" title="" name="images/products/2.jpg" rel="useZoom: 'ma-zoom1', smallImage: 'images/products/2.jpg'"&gt;
					&lt;img src="images/products/2.jpg" alt="" /&gt;
				&lt;/a&gt;
			&lt;/li&gt;
			&lt;li class="thumbnail-item"&gt;
				&lt;a href="images/products/3.jpg" class="cloud-zoom-gallery" title="" name="images/products/3.jpg" rel="useZoom: 'ma-zoom1', smallImage: 'images/products/3.jpg'"&gt;
					&lt;img src="images/products/3.jpg" alt="" /&gt;
				&lt;/a&gt;
			&lt;/li&gt;
			&lt;li class="thumbnail-item"&gt;
				&lt;a href="images/products/4.jpg" class="cloud-zoom-gallery" title="" name="images/products/4.jpg" rel="useZoom: 'ma-zoom1', smallImage: 'images/products/4.jpg'"&gt;
					&lt;img src="images/products/4.jpg" alt="" /&gt;
				&lt;/a&gt;
			&lt;/li&gt;
			&lt;li class="thumbnail-item"&gt;
				&lt;a href="images/products/5.jpg" class="cloud-zoom-gallery" title="" name="images/products/5.jpg" rel="useZoom: 'ma-zoom1', smallImage: 'images/products/5.jpg'"&gt;
					&lt;img src="images/products/5.jpg" alt="" /&gt;
				&lt;/a&gt;
			&lt;/li&gt;
			&lt;li class="thumbnail-item"&gt;
				&lt;a href="images/products/6.jpg" class="cloud-zoom-gallery" title="" name="images/products/6.jpg" rel="useZoom: 'ma-zoom1', smallImage: 'images/products/6.jpg'"&gt;
					&lt;img src="images/products/6.jpg" alt="" /&gt;
				&lt;/a&gt;
			&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/div&gt;
&lt;/div&gt;
				</pre>
                
                <p>BxSlider Activation</p>
                <pre class="code-box">
    $('.thumbnail-container .bxslider').bxSlider({
        slideWidth: 94,
        slideMargin: 5,
        minSlides: 4,
        maxSlides: 4,
        pager: false,
        speed: 500,
        pause: 3000
    });
</pre>

                
            </div>
            <hr>
            <!-- Section -->

            <h5 id="changelog"><strong>Change Log</strong> - <a href="#information">top</a></h5>

            <pre class="brush: html;">
                Galio - Bootstrap Responsive Template
                ----------------------------------------------------
                
                10/08/2015 - Version 1.0
                - RELEASE
			</pre>

            <hr>

            <!-- Credits -->
            <h5 id="credits"><strong>Sources and Credits</strong> - <a href="#information">top</a></h5>

           <div class="narrow-p">

            <b>I've used the following plugins as listed.</b>

            <ul>
                <li><a href="https://jquery.com/">jQuery</a></li>
                <li><a href="https://jqueryui.com/">jQuery ui</a></li>
                <li><a href="http://getbootstrap.com/">Bootstrap</a></li>
                <li><a href="http://bxslider.com">BxSlider</a></li>
                <li><a href="https://github.com/smurfy/cloud-zoom">Cloud Zoom</a></li>
                <li><a href="http://nivo.dev7studios.com">Nivo Slider</a></li>
                <li><a href="http://owlgraphic.com/owlcarousel/">OwlCarousel</a></li>
            </ul>

            <hr class="space">

        <p><strong>Free fonts:</strong></p>

        <ul>
        	<li><a href="https://www.google.com/fonts/specimen/Open+Sans">Open Sans</a></li>
          	<li><a href="https://www.google.com/fonts/specimen/Montserrat">Montserrat</a></li>
            <li><a href="https://www.google.com/fonts/specimen/Oswald">Oswald</a></li>
            <li><a href="https://www.google.com/fonts/specimen/Raleway">Raleway</a></li>
            <li><a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a></li>
        </ul>


        <hr class="space">

        <p>All images have been used for demonstration purposes only and are not included in the template.</p>

        <hr class="space">

        <!-- Credits -->

        <p>Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating this template. No guarantees, but I'll do my best to assist. If you have any suggestions on how to improve our templates or documentation please share them!</p>

        <hr class="space">

        </div>


    </div>
    <!-- end div .container -->

</body>

</html>
